<template>
  <scroll-view scroll-y @scrolltolower="end" class="content" lower-threshold="500">
    <!-- 直播答题弹框 -->
    <live-answer-pop ref="liveAnswerPop"></live-answer-pop>
    <!--答题信息-->
    <view class="top">
      <view class="icon">
        <image v-if="myRank>=90" :src="image_hosts+'/90.png'"></image>
        <image v-if="myRank>=50 && myRank<90" :src="image_hosts+'/50-90.png'"></image>
        <image v-if="myRank<50" :src="image_hosts+'/50.png'"></image>
      </view>
      <view class="top-message">答题速度超过{{ myRank }}%的人</view>
      <view class="end-title">
        恭喜
        <text style="font-weight: 500;">{{ info.username }}</text>
        答题全部正确<br/>
        答题奖励由店长统一发放，请耐心等待
      </view>
      <view class="fudai-title" v-if="blessingBagConfig.getRewardNum===0 && blessingBagConfig.rewardNum!==0">
        答题过程中有福袋奖励哦，拆开福袋送积分！
        下次看视频记得关注领取～
      </view>
      <!-- 参与调查问卷-->
      <view v-if="needInvestigate === true" class="question-button">
        <view class="button-item" @click="toQuestion()">{{ answerInfo.investigateName }}</view>
      </view>
    </view>
    <view class="list-box">
      <!--      <view class="list-title">-->
      <!--        <image :src="image_hosts+'/end/title-jinbi.png'"></image>-->
      <!--        看养生知识 奖励送不停-->
      <!--      </view>-->
      <!--      <view class="message">-->
      <!--        <view class="message-item">-->
      <!--          <view class="message-icon"></view>-->
      <!--          <text>-->
      <!--            看首页小视频或参与热门话题，-->
      <!--            <text v-if="openType===2">每天最高得{{30+upLimit}}积分哦！积分购买商品可抵现金。</text>-->
      <!--            <text v-if="openType===1">积分现金红包送不停！</text>-->
      <!--          </text>-->
      <!--        </view>-->
      <!--&lt;!&ndash;        <view class="message-item">&ndash;&gt;-->
      <!--&lt;!&ndash;          <view class="message-icon"></view>&ndash;&gt;-->
      <!--&lt;!&ndash;          积分购买商品可抵现金！&ndash;&gt;-->
      <!--&lt;!&ndash;        </view>&ndash;&gt;-->
      <!--      </view>-->
      <!--      <view class="list">-->
      <!--        <view v-for="(item,index) in videoList" @click="toVideoList(item,index)">-->
      <!--          <view class="item video" v-if="item.dataType===1">-->
      <!--            <image mode="aspectFill" class="bj" :src="item.coverUrl"></image>-->
      <!--            <view class="item-box">-->
      <!--              <view class="type-icon">-->
      <!--                <image :src="image_hosts+'/end/play.png'"></image>-->
      <!--              </view>-->
      <!--              <view class="video-info-box">-->
      <!--                <view class="video-num">-->
      <!--                  <image :src="image_hosts+'/end/huohua.png'"></image>-->
      <!--                  播放量:{{item.playCount}}-->
      <!--                </view>-->
      <!--                <view class="video-title">-->
      <!--                  <span class="two-row-hide">{{ item.title }}</span>-->
      <!--                </view>-->
      <!--              </view>-->
      <!--            </view>-->
      <!--          </view>-->
      <!--          <view class="item topic" v-if="item.dataType===2">-->
      <!--            <image mode="aspectFill" class="bj" :src="item.coverUrl"></image>-->
      <!--            <view class="item-box">-->
      <!--              <view class="type-icon">-->
      <!--                <image :src="image_hosts+'/end/title2.png'"></image>-->
      <!--                <text>康粉圈</text>-->
      <!--              </view>-->
      <!--              <view class="topic-title-box">-->
      <!--                <view class="topic-title">-->
      <!--                  <span class="two-row-hide">#{{ item.title }}</span>-->
      <!--                </view>-->
      <!--                <view class="topic-button">-->
      <!--                </view>-->
      <!--              </view>-->
      <!--            </view>-->
      <!--          </view>-->
      <!--        </view>-->
      <!--      </view>-->
    </view>
    <view class="button-box" @click="to_sindex">
      <view class="button">回到首页 看更多精彩视频</view>
    </view>
    <!-- 问卷弹窗 -->
    <question_pop></question_pop>
    <!-- 大促转盘-->
    <dacu-7 ref="dacu7"></dacu-7>
    <!-- 答题完成-->
	<view v-if="needInvestigate === false">
		<answer-success ref="success" :myRank="myRank"></answer-success>
	</view>
  </scroll-view>
</template>

<script>
import {get_video_img} from "../../common/new_file.js"
import answerSuccess from "@/pages/newAnswer/components/answer-success.vue";

export default {
  components: {answerSuccess},
  data() {
    return {
      videoList: [],
      video_id: 0,
      list: [],
      info: {},
      activityId: '',
      needInvestigate: false, // 判断是否有未答的调研问卷
      myRank: "",
      image_hosts: this.image_host + 'videoAnswer',
      answerInfo: {},
      openType: 0,
      upLimit: 0,
      blessingBagConfig: {},
	  isShowSuccess:false,// 是否展示弹窗
    }
  },
  onLoad(req) {
    var that = this;
    this.video_id = req.video_id;
    this.activityId = req.activityId;
    this.myRank = req.myRank
    this.getInfo();
    this.get_video();
    this.authQuestion();
    this.$refs.liveAnswerPop.getLiveInfo()
    this.$refs.dacu7.init()
    this.getConfig()
    this.getBlessingBagConfig()
  },
  methods: {
    // openType 1健康比，2积分
    async getConfig() {
      let {data} = await this.$NoteApi.doRequest("get", 'ruiVideo/getCustomerRewardType', '', '')
      this.openType = data.data.openType
      this.upLimit = data.data.upLimit
    },
    // 获取福袋配置
    async getBlessingBagConfig() {
      let res = await this.$javaCircle.doRequest("get", 'vs/ruiVideo/luck/status/' + this.video_id, {}, '');
      this.blessingBagConfig = res.data.data;
      console.log(this.blessingBagConfig)
    },
    getInfo(id) {
      var that = this;
      let data = {
        videoId: this.video_id,
        activityId: this.activityId
      }
      that.$NoteApi.doRequest("get", 'ruiVideo/vo/afterQa', data).then(res => {
        if (res.data.code == 0) {
          this.info = res.data.data;
          // this.list = res.data.data.list;
        }
      })
    },
    get_video() {
      //#ifdef H5
      return
      //#endif
      var _this = this;
      var data = {
        videoId: this.video_id,
      };
      _this.$NoteApi.doRequest("get", "ruiVideo/afterAnswer/list", data).then(res => {
        if (res.data.code === 0) {
          _this.videoList = _this.videoList.concat(res.data.data)
        }
      })
    },
    end() {
      this.get_video()
    },
    to_sindex() {
      uni.switchTab({
        url: '/pages/sindex/index'
      })
    },
    // 验证是否需要跳转到视频答题
    authQuestion() {
      var _this = this;
      var data = {};
      _this.$NoteApi.doRequest("post", "investigate/needInvestigate", data).then(res => {
        if (res.data.code == 0) {
          if (res.data.data === 1) {
            _this.needInvestigate = true
			_this.$refs.success.clearIntervalDo()
          }
          if (res.data.data !== null) {
            _this.needInvestigate = true
            _this.answerInfo = res.data.data
			_this.$refs.success.clearIntervalDo()
          }
        }
      })
    },
    // 跳转到问卷调研
    toQuestion() {
      uni.redirectTo({
        url: '/pages/newAnswer/questionnaire?video_id=' + this.video_id
      });
    },
    // 去首页
    go_index() {
      uni.switchTab({
        url: '/pages/sindex/index'
      })
    },
    toVideoList(item, index) {
      if (item.dataType === 1) { //视频
        let videoWatchedList = uni.getStorageSync('videoWatchedList')
        let list = JSON.parse(JSON.stringify(this.videoList));
        list.splice(index, 1)
        let newList = list.filter(video => {
          return video.dataType === 1 && !videoWatchedList.includes(video.id)
        })
        newList.unshift(item)
        uni.setStorageSync('newList', newList)
        uni.navigateTo({url: '/videoList/index/index'})
      } else { //话题
        uni.navigateTo(
            {url: '/pages/circle/details/details?id=' + item.id}
        )
      }
    },
  }
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #F1F1F1;
  overflow: auto;
}

.top {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 40upx 48upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top .icon {
  width: 210upx;
  height: 210upx;
  margin-bottom: 20upx;
}

.top .icon image {
  width: 100%;
  height: 100%;
}

.top .end-title {
  width: 590upx;
  text-align: center;
  color: #333;
  font-size: 34upx;
  font-weight: 400;
  line-height: 48upx;
  margin-bottom: 30upx;
}

.top .end-title text {
  color: #FB7400;
}

.top .video-info {
  width: 100%;
  background-color: #F8F8F8;
  border-radius: 4upx;
  box-sizing: border-box;
  padding: 20upx 40upx;
  font-size: 32upx;
  color: #333;
  font-weight: 400;

}

.video-end-date {
  font-size: 28upx;
  color: #999999;
  margin-top: 20upx;
}

.top-message {
  height: 46upx;
  line-height: 46upx;
  text-align: center;
  border-radius: 23upx;
  background: linear-gradient(360deg, #ED7F00 0%, #FFAE00 100%);
  font-size: 32upx;
  color: #fff;
  margin-bottom: 20upx;
  padding: 0 22upx;
}

.question-button {
  width: 456upx;
  height: 98upx;
  border: 2upx solid #5CAE77;
  margin: 0 auto;
  line-height: 98upx;
  text-align: center;
  color: #5CAE77;
  font-size: 40upx;
  font-weight: 500;
  border-radius: 14upx;
  margin-top: 30upx;
}

.list-box {
  width: 100%;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  margin-top: 30upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.list-box .list-title {
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/videoAnswer/end/title.png");
  background-size: 100% 100%;
  width: 662upx;
  height: 82upx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46upx;
  color: #fff;
  font-weight: 500;
  margin-top: -10upx;
  z-index: 10;
  position: absolute;
  top: -1upx;
  left: 50%;
  transform: translate(-50%, 0);
}

.list-box .list-title image {
  width: 76upx;
  height: 61upx;
}

.message {
  width: 690upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/videoAnswer/end/bg_tishi@2x.png");
  background-size: 100% 100%;
  margin-top: 102upx;
  box-sizing: border-box;
  padding: 10upx;
}

.message-item {
  width: 100%;
  display: flex;
  font-size: 34upx;
  color: #F18900;
  font-weight: 500;
  line-height: 40upx;
}

.message-item .message-icon {
  width: 12upx;
  height: 12upx;
  background-color: #F18900;
  border-radius: 50%;
  margin-top: 15upx;
  margin-right: 10upx;
}

.list {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 0 30upx;
  column-count: 2;
  column-gap: 18upx;
  margin-top: 24upx;
}

.item {
  width: 336upx;
  height: 516upx;
  margin-bottom: 24upx;
  position: relative;
  border-radius: 16upx;
}

.bj {
  width: 100%;
  height: 100%;
  border-radius: 16upx;
}

.item-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .1);
  border-radius: 16upx;
}

.type-icon {
  position: absolute;
  top: 20upx;
  left: 20upx;
  width: 50upx;
  height: 50upx;
}

.type-icon image {
  width: 100%;
  height: 100%;
}

.video-num {
  box-sizing: border-box;
  padding: 3upx 9upx;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 0 21upx 21upx 0;
  display: flex;
  align-items: center;
  width: fit-content;
  font-size: 26upx;
  color: #000000;
}

.video-info-box {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0.54) 100%);
  border-radius: 0 0 16upx 16upx;
}

.video-num image {
  width: 24upx;
  height: 28upx;
  margin-right: 4upx;
}

.item .video-title {
  max-height: 300upx;
  width: 100%;
  color: #fff;
  box-sizing: border-box;
  padding: 12upx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 38upx;
  font-weight: 500;
  line-height: 45upx;
}

.topic .type-icon {
  width: 164upx;
  height: 50upx;
  background-color: rgba(255, 255, 255, .9);
  border-radius: 0 100upx 100upx 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 12upx;
  left: 0;
  font-size: 32upx;
  color: #00C141;
  font-weight: 400;
}

.topic .type-icon image {
  width: 34upx;
  height: 34upx;
  margin-right: 6upx;
}

.topic-title-box {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  padding: 12upx;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0.54) 100%);
  border-radius: 0 0 16upx 16upx;
  width: 100%;
}

.topic-title {
  font-size: 38upx;
  color: #fff;
  font-weight: 500;
  word-break: break-all;
  width: 100%;
}

.button-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: 20upx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
}

.button-box .button {
  width: 686upx;
  height: 98upx;
  background-color: #5CAE77;
  border-radius: 14upx;
  color: #fff;
  font-size: 40upx;
  font-weight: 500;
  line-height: 98upx;
  text-align: center;
}

.two-row-hide {
  white-space: normal;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fudai-title {
  width: 100%;
  text-align: center;
  color: #FB7400;
  font-size: 38upx;
  background: rgba(237, 127, 0, .3);
  border-radius: 8upx;
  box-sizing: border-box;
  padding: 10upx;
}
</style>
